<template>

    <div class="shipin_warp">
        <div class="shipin_warp_left">
            <div style="width: 100%;">
                <img src="../../../assets/image/home/xj2.jpg" alt="" style="width: 100%;">
            </div>

            <div class="shipin_btns">
                <el-button size="small" :type="active && active === item ? 'isactiveBtn' : ''" @click="btnclick(item)"
                    v-for="item in leftbtn" :key="item">
                    {{ item }}
                </el-button>


                <el-button size="small" :type="active && active === item ? 'isactiveBtn' : ''" @click="btnclick(item)"
                    v-for="item in rightbtn" :key="item">
                    {{ item }}
                </el-button>

            </div>

            <div class="shipin_btns">
                <el-date-picker v-model="timevalue" type="datetime" placeholder="" style="width:10rem;" />
                <el-button size="small" type="primary" style="margin: 0 1rem;">现在</el-button>
               <img src="../../../assets/image/timeLine/play.png" class="timebtn" alt="" v-show="isplay" @click="timebtnClick(1)">
                <img src="../../../assets/image/timeLine/pause.png" class="timebtn" alt="" v-show="!isplay" @click="timebtnClick(1)">
                <div class="slider_warp">
                    <input type="range" v-model="timevce" min="0" max="100" @change="inputchange"  style="width: 100%;" />
                    <p :style="'left:'+leftvalue" style="color: #fff;">{{ progress }}</p>
                </div>


            </div>


        </div>


        <div class="shipin_warp_right">

            <div class="shipin_warp_right_top">
                <div class="shipin_warp_right_header">
                    <h4>告警记录</h4>
                    <span>2025-07-25</span>
                </div>

                <ul class="gaojing_ul">
                    <li v-for="(item, index) in timleset" :key="item">
                        {{ item }}
                    </li>
                </ul>
            </div>

            <div class="shipin_warp_right_bottom">
                <cameraDiv />
            </div>
        </div>
    </div>
</template>


<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import cameraDiv from './comend/cameraDiv.vue'
const leftbtn = ref(['-1h', '-10min', '-1min', '-10s'])
const rightbtn = ref(['+1h', '+10min', '+1min', '+10s'])
const timevalue = ref('2025-07-21')
const timevce = ref(10)
const progress = ref('12:00')
const active = ref(null)
const isplay = ref(true)
const timleset = ref([
    '2025-07-25  14:08:45', '2025-07-25  14:08:45', '2025-07-25  14:08:45'
])
const btnclick = (item) => {
    active.value = item
}
const leftvalue = ref(0)

const timebtnClick = ()=>{
    isplay.value = !isplay.value
}

const inputchange =()=>{
    leftvalue.value = Number(timevce.value).toFixed(0)

}
</script>

<style lang="less" scoped>
.shipin_warp {
    height: 29rem;
    width: 100%;
    display: flex;

    .shipin_warp_left {
        width: 65%;

        .shipin_btns {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;

        }

    }

    .el-button {
        background: url(../../../assets/image/home/子标题-未选.png) no-repeat;
        color: #fff;
        width: 3.4rem;
        border: 0;
        background-size: 100% 100%;
    }

    .el-button--isactiveBtn {
        background: url(../../../assets/image/home/子标题-选中.png) no-repeat;
        background-size: 100% 100%;
    }

    .shipin_warp_right {
        width: calc(35% - 1rem);
        margin-left: 1rem;
    }

    ::deep(.el-button+.el-button) {
        margin-left: 0.2rem;
    }

    .shipin_warp_right_header {
        color: #04F1FF;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        h4 {
            margin: 0.2rem 0;
            width: 100%;
            text-align: center;
            color: #fff;
        }
    }

    .shipin_warp_right_top {
        border: 1px solid #04F1FF;
        height: 50%;
        padding: 1rem;
    }

    .shipin_warp_right_bottom {
        height: calc(50% - 3rem);
        width: 100%;
        margin-top: 1rem;
    }

    .gaojing_ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;

        li {
            list-style: none;
            width: calc(100% - 2rem);
            height: 2.5rem;
            background: url(../../../assets/image/home/title-bg-long.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 0.5rem;
            color: #fff;
            line-height: 2.5rem;
            padding-left: 2rem;
        }
    }
    .timebtn{
        margin-right: 0.2rem;
        cursor: pointer;
    }
    .slider_warp{
        width:45%;
        position: relative;
        p{
            position: absolute;
            top: 0.2rem;
        }
    }
}
</style>